<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <template slot="before">当前共有{{ total }}条记录</template>
        <template slot="after">
          <el-button type="warning" size="mini" @click="$router.push('/import')">导入</el-button>
          <el-button type="danger" size="mini">导出</el-button>
          <el-button type="primary" size="mini" @click="showDialog=true">新增员工</el-button>
        </template>
      </page-tools>
      <el-card v-loading="loading">
        <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'timeOfEntry', order: 'descending'}"
          border
        >
          <el-table-column
            prop="date"
            label="序号"
            sortable
            width="80"
            align="center"
            type="index"
          />
          <el-table-column
            prop="username"
            label="姓名"
            sortable
            width="150"
            align="center"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            sortable
            align="center"
          />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            sortable
            align="center"
            :formatter="formatterEmployment"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            sortable
            align="center"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            sortable
            width="220"
            align="center"
          />
          <el-table-column
            prop="enableState"
            label="账户状态"
            sortable
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                :value="scope.row.enableState===1"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="操作"
            sortable
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="$router.push(`employees/detail/${scope.row.id}`)">查看</el-button>
              <el-button type="text" size="mini">转正</el-button>
              <el-button type="text" size="mini">调岗</el-button>
              <el-button type="text" size="mini">离职</el-button>
              <el-button type="text" size="mini">角色</el-button>
              <el-button type="text" size="mini" @click="delEmployee(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top:20px;display:flex;justify-content:end">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 50, ]"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <!-- 新增员工的弹层 -->
      <!-- 使用组件 -->
      <!-- 这里为什么可以用sync 因为后面的变量是来源于data -->
      <!-- 子组件 this.$emit("update:showDialog", false) -->
      <add-employee :show-dialog.sync="showDialog" />
    </div>
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
import { getTime } from '@/utils/index'
import EmployeeEnum from '@/api/constant/employees'
import addEmployee from './components/addEmployee.vue'
export default {
  components: { addEmployee },
  data() {
    return {
      showDialog: false,
      tableData: [],
      params: {
        page: 1,
        size: 10
      },
      total: 10,
      loading: false
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    // 获取员工列表综合信息
    async getEmployeeList() {
      this.loading = true
      // const res = await getEmployeeList(this.params) // 有{total:26,rows:[]}
      // 为了方便我这里直接解构，写法更快,下次取值的时候就不用total=res.total 很麻烦
      const { total, rows } = await getEmployeeList(this.params)
      for (const time of rows) {
        if (time.timeOfEntry) time.timeOfEntry = getTime(time.timeOfEntry) // 处理时间，把时间转为标准格式
      }
      this.tableData = rows
      console.log(this.tableData)
      this.total = total
      this.loading = false
      // console.log(total, rows)
    },
    // 删除员工
    async delEmployee(id) {
      try {
        await this.$confirm('确定删除员工信息吗？')
        await delEmployee(id)
        this.$message.success('删除成功')
        this.getEmployeeList()
      } catch (error) {
        console.log(error)
      }

      // await delEmployee(id)
      console.log(id)
    },

    // 格式化聘用形式
    formatterEmployment(row, column, cellValue) {
      // cellValue是表格当前的数据 如我表格当前的数据是 1和2 或者是什么都没有
      const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)
      // console.log('格式', obj) // 能找到 或者找不到（undefined）
      // console.log(row, column, cellValue)
      return obj ? obj.value : '未知'
    },
    handleSizeChange(newsize) { // 每页显示的条数
      this.params.size = newsize
      this.getEmployeeList()
    },
    handleCurrentChange(newpage) {
      this.params.page = newpage
      this.getEmployeeList()
    }
  }
}
</script>

<style>

</style>
